<template>
  <ul class="multiple-choice pbm0">
    <li
      class="sc-display white"
      v-for="(item, index) in state.list"
      v-bind:key="index"
    >
      <input
        :id="'choice_' + state.id + index + 1"
        type="checkbox"
        :value="index + 1"
        v-model="state.checked"
      />
      <label :for="'choice_' + state.id + index + 1"
        ><span class="fs16">{{ item }}</span></label
      >
    </li>
  </ul>
</template>

<script>
import { reactive, watch } from "vue";

export default {
  // 父组件传值
  props: {
    msg: Object,
  },
  // 事件抛出组
  emits: ["multiple-choice"],
  // 钩子
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      id: props.msg.id,
      list: props.msg.list,
      checked: [],
    });
    // 选择监听
    watch(
      () => state.checked,
      // 接收参数 newValue, oldValue
      (newValue) => {
        // 输入值回传父组件
        emit("multiple-choice", { [state.id]: newValue });
      }
    );
    watch(
      () => props.msg,
      (newValue) => {
        state.id = props.msg.id;
        state.list = props.msg.list;
      }
    );
    // 传入模板
    return { state };
  },
};
// const props = defineProps({
//   msg: Object,
// });

// const state = reactive({
//   checked: [],
// });
</script>
